import {
  ModalForm,
  ProFormDatePicker,
  ProFormInstance,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, message } from 'antd';
import moment from 'moment';
import React, { useEffect, useRef } from 'react';

export default (props: any) => {
  const modalFormRef = useRef<ProFormInstance>();

  const waitTime = (time: number = 100) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
      }, time);
    });
  };

  return (
    <ModalForm
      title="暂存数据"
      trigger={
        <Button
          hidden={!props?.showButton}
          type="primary"
          onClick={() => {
            modalFormRef.current?.setFieldsValue({
              date: moment().format('YYYY-MM-DD'),
            });
          }}
        >
          暂存
        </Button>
      }
      autoFocusFirstInput
      formRef={modalFormRef}
      modalProps={{
        onCancel: () => console.log('run'),
        forceRender: true, //强制刷新，否则表单时间回填不进去
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        await waitTime(1000);
        console.log(modalFormRef.current?.getFieldValue());
        console.log(props?.stagingData);

        message.success('提交成功');
        return true;
      }}
    >
      <ProFormDatePicker
        name={'date'}
        label={'时间'}
        allowClear
        rules={[{ required: true, message: '请选择时间' }]}
        disabled
      />
      <ProFormTextArea
        name={'备注'}
        label={'备注'}
        placeholder={'填写备注信息，用于标识该暂存'}
        rules={[{ required: true, message: '请填写' }]}
      />
    </ModalForm>
  );
};
